<template>
  <div style="font-size: 14px">
    <!-- 变更详情弹窗 -->
    <el-drawer v-model="dialogVisible" title="变更详情" direction="rtl" size="1180">
      <div v-loading="loading">
        <div class="btns">
          <span>操作：</span>
          <div class="flex-1" v-if="details.statusCode != 'change_close'">
            <el-button type="primary" v-if="details.statusCode != 'change_close'" @click="showAssignTechniciansMask">
              指派技术员
            </el-button>
            <el-button type="primary" v-if="processDetailData.flowActivityDTO" @click="showTaskReassignmentMask">
              任务重新指派
            </el-button>
            <template v-if="details.technicianNo == userStore.userInfo.userId">
              <el-button type="primary" v-if="!details.flowStart" @click="showOpenProcessMask">开启流程</el-button>
              <el-button type="primary" v-for="item in processDetailData.outcomes" :key="item" @click="processOutcome(item)">
                {{ item }}
              </el-button>
            </template>
          </div>
          <div class="flex-1" v-if="details.statusCode == 'change_close'">
            <el-button type="primary" @click="reStart"> 流程重新开始 </el-button>
          </div>
          <el-dropdown>
            <div class="el-dropdown-link">
              <el-button type="primary" plain>
                <span>更多操作</span>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </el-button>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <div v-auth="'change_detail_flowTrack'">
                  <el-dropdown-item v-if="details.processKey" @click="seeFlowChart">流程跟踪</el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="title">基本信息</div>
        <div class="table-data-box">
          <div class="data-cell row">
            <span class="label">标题</span>
            <span class="content">{{ details.etitle }}</span>
          </div>
          <div class="data-cell row">
            <span class="label">描述</span>
            <div class="content" v-html="details.edesc"></div>
          </div>
          <div class="data-cell">
            <span class="label">所属客户</span>
            <span class="content">{{ details.companyName }}</span>
          </div>
          <div class="data-cell">
            <span class="label">变更编号</span>
            <span class="content">{{ details.changeNo }}</span>
          </div>
          <div class="data-cell">
            <span class="label">指派组</span>
            <span class="content">{{ details.orgName }}</span>
          </div>
          <div class="data-cell">
            <span class="label">指派技术员</span>
            <span class="content">{{ details.technicianName }}</span>
          </div>
          <div class="data-cell">
            <span class="label">变更分类</span>
            <span class="content">{{ details.categoryName }}</span>
          </div>
          <div class="data-cell">
            <span class="label">状态</span>
            <span class="content">{{ details.statusName }}</span>
          </div>
          <div class="data-cell">
            <span class="label">优先级</span>
            <div class="content">
              <span
                v-if="details.priorityColor"
                :style="{ background: details.priorityColor }"
                style="padding: 0 8px; color: #ffffff"
              >
                {{ details.priorityName }}
              </span>
              <span v-else>{{ details.priorityName }}</span>
            </div>
          </div>
          <div class="data-cell">
            <span class="label">影响</span>
            <div class="content">
              <span
                v-if="details.effectRangeColor"
                :style="{ background: details.effectRangeColor }"
                style="padding: 0 8px; color: #ffffff"
              >
                {{ details.effectRangeName }}
              </span>
              <span v-else>{{ details.effectRangeName }}</span>
            </div>
          </div>
          <div class="data-cell">
            <span class="label">紧急度</span>
            <div class="content">
              <span
                v-if="details.seriousnessColor"
                :style="{ background: details.seriousnessColor }"
                style="padding: 0 8px; color: #ffffff"
              >
                {{ details.seriousnessName }}
              </span>
              <span v-else>{{ details.seriousnessName }}</span>
            </div>
          </div>
          <div class="data-cell">
            <span class="label">创建时间</span>
            <span class="content">{{ details.createTime }}</span>
          </div>
          <div class="data-cell">
            <span class="label">计划开始时间</span>
            <span class="content">{{ details.planStartTime }}</span>
          </div>
          <div class="data-cell">
            <span class="label">计划结束时间</span>
            <span class="content">{{ details.planEndTime }}</span>
          </div>
          <div class="data-cell">
            <span class="label">实际开始时间</span>
            <span class="content">{{ details.actualStartTime }}</span>
          </div>
          <div class="data-cell">
            <span class="label">实际结束时间</span>
            <span class="content">{{ details.actualEndTime }}</span>
          </div>
          <div class="data-cell">
            <span class="label">申请人</span>
            <span class="content">{{ details.creator }}</span>
          </div>
          <div class="data-cell">
            <span class="label">变更审批</span>
            <span class="content">111111</span>
          </div>
        </div>
        <!-- <div class="title">拓展信息</div> -->
        <el-tabs v-model="tabName" class="demo-tabs">
          <el-tab-pane label="扩展信息" name="expandInfo">
            <ExpandInfo type="change" :details="details"></ExpandInfo>
          </el-tab-pane>
          <!-- 附件 -->
          <el-tab-pane label="附件" name="enclosure">
            <EnclosureList
              v-if="tabHistory.indexOf('enclosure') >= 0"
              :eno="details.eno"
              event-type="itsm.change"
            ></EnclosureList>
          </el-tab-pane>
          <!-- 变更计划 -->
          <el-tab-pane label="变更计划" name="changePlan">
            <div style="width: 60%; padding: 20px; border: 1px solid #dddddd; border-radius: 10px">
              <el-form label-width="70">
                <el-form-item label="">
                  <el-radio-group v-model="changePlanType" aria-label="label position">
                    <el-radio-button value="effect">影响</el-radio-button>
                    <el-radio-button value="onLinePlan">上线计划</el-radio-button>
                    <el-radio-button value="returnPlan">回退计划</el-radio-button>
                    <el-radio-button value="checklist">测试计划</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="影响描述" v-if="changePlanType == 'effect'">
                  <el-input type="textarea" v-model="changePlanForm.effect" :rows="4" placeholder="请输入影响描述"></el-input>
                </el-form-item>
                <el-form-item label="上线计划" v-if="changePlanType == 'onLinePlan'">
                  <el-input type="textarea" v-model="changePlanForm.onLinePlan" :rows="4" placeholder="请输入上线计划"></el-input>
                </el-form-item>
                <el-form-item label="回退计划" v-if="changePlanType == 'returnPlan'">
                  <el-input type="textarea" v-model="changePlanForm.returnPlan" :rows="4" placeholder="请输入回退计划"></el-input>
                </el-form-item>
                <el-form-item label="测试计划" v-if="changePlanType == 'checklist'">
                  <el-input type="textarea" v-model="changePlanForm.checklist" :rows="4" placeholder="请输入测试计划"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitChangePlan">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <!-- 变更审批 -->
          <!-- <el-tab-pane label="变更审批" name="changeApproval">
            <ApprovalBox v-if="tabHistory.indexOf('changeApproval') >= 0" :eno="details.eno"></ApprovalBox>
          </el-tab-pane> -->
          <!-- 流程历史仼务 -->
          <el-tab-pane label="流程历史任务" name="processHistoryTasks" v-if="details.pid">
            <ProcessHistoryTasksBox
              v-if="tabHistory.indexOf('processHistoryTasks') >= 0"
              :pid="details.pid"
            ></ProcessHistoryTasksBox>
          </el-tab-pane>
          <!-- 历史记录 -->
          <div v-auth="'change_detail_history'">
            <el-tab-pane label="历史记录" name="historicalRecords">
              <HistoricalRecordsBox
                v-if="tabHistory.indexOf('historicalRecords') >= 0"
                :eno="details.eno"
                event-type="itsm.change"
              ></HistoricalRecordsBox>
            </el-tab-pane>
          </div>
          <!-- 历史邮件 -->
          <div v-auth="'change_emailHistory'">
            <el-tab-pane label="历史邮件" name="email">
              <EmailListBox
                v-if="tabHistory.indexOf('email') >= 0"
                :eno="details.eno"
                :request-code="details.requestCode"
              ></EmailListBox>
            </el-tab-pane>
          </div>
          <!-- 关联配置项 -->
          <el-tab-pane label="关联配置项" name="associationConfig">
            <AssociationConfigList v-if="tabHistory.indexOf('associationConfig') >= 0" :eno="details.eno"></AssociationConfigList>
          </el-tab-pane>
          <!-- 关联服务 -->
          <el-tab-pane label="关联服务" name="associationServe">
            <AssociationServicesBox :list="details.listEvent || []"></AssociationServicesBox>
          </el-tab-pane>
          <!-- 关联请求 -->
          <el-tab-pane label="关联请求" name="associationRequest">
            <AssociationRequestBox
              v-if="tabHistory.indexOf('associationRequest') >= 0"
              :eno="details.eno"
            ></AssociationRequestBox>
          </el-tab-pane>
          <!-- 关联问题 -->
          <el-tab-pane label="关联问题" name="associationQuestion">
            <AssociationQuestionList :eno="details.eno"></AssociationQuestionList>
          </el-tab-pane>
          <!-- 任务 -->
          <el-tab-pane label="任务" name="task">
            <TaskListBox v-if="tabHistory.indexOf('task') >= 0" :eno="details.eno" event-type="itsm.change"></TaskListBox>
          </el-tab-pane>
          <!-- 进展及成本 -->
          <el-tab-pane label="进展及成本" name="progressAndCost">
            <CostList v-if="tabHistory.indexOf('progressAndCost') >= 0" :eno="details.eno" event-type="itsm.change"></CostList>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!-- 指派技术员弹窗 -->
    <el-dialog v-model="assignTechniciansMask" title="指派技术员" width="500">
      <el-form label-width="60">
        <!-- <el-form-item label="技术组">
          <el-cascader v-model="orgNo" :options="groupList" :show-all-levels="false" style="width: 100%" />
        </el-form-item> -->
        <el-form-item label="技术组">
          <el-input
                style="flex: 1; overflow: hidden"
                v-model="assigneeGroupName"
                placeholder="请选择指派组"
                :readonly="true"
                clearable
            ></el-input>
            <el-button
              style="margin-left: 10px"
              type="primary"
              :icon="Search"
              @click="selectDepartment('filterForm.assigneeGroupNo', '请选择指派组')"
            ></el-button>
        </el-form-item>
        <el-form-item label="技术员">
          <div style="display: flex; width: 100%">
            <el-input
              style="flex: 1; overflow: hidden"
              v-model="assignTechniciansForm.technicianName"
              placeholder="请选择技术员"
              readonly
            ></el-input>
            <el-button style="margin-left: 10px" type="primary" :icon="Search" @click="selectUser('technicianNo')"></el-button>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="assignTechniciansForm.remark" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="assignTechniciansMask = false">取消</el-button>
        <el-button type="primary" @click="assignTechniciansSubmit">提交</el-button>
      </template>
    </el-dialog>
    <!-- 开启流程 -->
    <el-dialog title="开启流程" v-model="openProcessMask" width="600">
      <div v-loading="openProcessLoading">
        <el-form label-width="98">
          <el-form-item label="处理备注">
            <el-input type="textarea" v-model="openProcessForm.remark" :rows="5" placeholder="请输入流程备注" />
          </el-form-item>
          <el-form-item label="技术组" required>
            <el-input v-model="openProcessForm.groupName" :disabled="true" placeholder="加载中" />
          </el-form-item>
          <el-form-item label="技术员" required>
            <div style="display: flex; width: 100%">
              <el-input
                style="flex: 1; overflow: hidden"
                v-model="openProcessForm.assigneeName"
                placeholder="请选择技术员"
                readonly
              ></el-input>
              <el-button style="margin-left: 10px" type="primary" :icon="Search" @click="selectUser('assigneeNo')"></el-button>
            </div>
          </el-form-item>
          <el-form-item label="通知指定邮箱">
            <el-input v-model="openProcessForm.emailAddress" placeholder="请输入通知指定邮箱" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button :disabled="openProcessLoading" @click="openProcessMask = false">取消</el-button>
          <el-button :disabled="openProcessLoading" type="primary" @click="openProcessSubmit">开启流程</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 任务重新指派弹窗 -->
    <el-dialog v-if="dialogVisible" v-model="taskReassignmentMask" title="任务重新指派" width="550">
      <div v-loading="taskReassignmentLoading">
        <el-form label-width="75">
          <el-form-item label="技术员" required>
            <div style="display: flex; width: 100%">
              <el-input
                style="flex: 1; overflow: hidden"
                v-model="taskReassignmentForm.assigneeName"
                placeholder="请选择技术员"
                readonly
              ></el-input>
              <el-button
                style="margin-left: 10px"
                type="primary"
                :icon="Search"
                @click="selectUser('taskReassignment')"
              ></el-button>
            </div>
          </el-form-item>
          <el-form-item label="处理备注">
            <el-input type="textarea" v-model="taskReassignmentForm.remark" :rows="4" placeholder="请输入备注" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button :disabled="taskReassignmentLoading" @click="taskReassignmentMask = false">取消</el-button>
        <el-button :disabled="taskReassignmentLoading" type="primary" @click="taskReassignmentSubmit">提交</el-button>
      </template>
    </el-dialog>
    <!-- 提交变更计划 -->
    <el-dialog v-model="processHandleMask" :title="dialogName" width="600">
      <div v-loading="processHandleLoading">
        <el-form>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="processHandleForm.remark" :rows="5" placeholder="请输入备注" />
          </el-form-item>

          <!-- <el-form-item label="技术组">
            <el-cascader v-model="groupNo" :options="groupList" :show-all-levels="false" style="width: 100%" />
          </el-form-item> -->
          <el-form-item label="技术员">
            <div style="display: flex; width: 100%">
              <el-input
                style="flex: 1; overflow: hidden"
                v-model="processHandleForm.assigneeName"
                placeholder="请选择技术员"
                readonly
              ></el-input>
              <el-button
                style="margin-left: 10px"
                type="primary"
                :icon="Search"
                @click="selectUser('processHandleFormTechnicianNo')"
              ></el-button>
            </div>
          </el-form-item>
          <el-form-item label="通知指定邮箱">
            <el-input v-model="processHandleForm.emailAddress" placeholder="请输入通知指定邮箱" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button :disabled="processHandleLoading" @click="processHandleMask = false">取消</el-button>
          <el-button :disabled="processHandleLoading" type="primary" @click="processHandleSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 选择技术员弹窗 -->
    <SelectUserMask ref="selectUserMask" title="技术组" :group-no="selectUserGroupNo" @change="selectUserChange"></SelectUserMask>
    <!-- 查看流程图片弹窗 -->
    <el-dialog v-model="flowChartMask" title="流程图" width="900px">
      <!-- <img class="liu-cheng-img" :src="flowChartUrl" alt="" /> -->
      <div v-html="flowImg"></div>
    </el-dialog>
    <!-- 选择部门 -->
    <SelectDepartment ref="selectDepartmentMask" :title="selectDepartmentTitle" @change="departmentChange"></SelectDepartment>
  </div>
</template>

<script setup lang="ts" name="DetailsMask">
import { ref, computed, watch, reactive } from "vue";

import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";

import ExpandInfo from "@/components/ExpandInfo/index.vue";
import AssociationServicesBox from "@/components/AssociationServicesBox/index.vue";
import EnclosureList from "@/components/EnclosureList/index.vue";
import TaskListBox from "@/components/TaskListBox/index.vue";
import HistoricalRecordsBox from "@/components/HistoricalRecordsBox/index.vue";
import AssociationConfigList from "@/components/AssociationConfigList/index.vue";
import EmailListBox from "@/components/EmailListBox/index.vue";
import ProcessHistoryTasksBox from "@/components/ProcessHistoryTasksBox/index.vue";
import CostList from "@/components/CostList/index.vue";
import AssociationRequestBox from "@/components/AssociationRequestBox/index.vue";
import SelectUserMask from "@/components/SelectUserMask/index.vue";
import AssociationQuestionList from "@/components/AssociationQuestionList/index.vue";
import SelectDepartment from "@/components/SelectDepartment/SelectDepartment.vue";
import {
  changeInfo,
  assignTask,
  changeAction,
  processHandle,
  editChangeBaseInfo,
  openProcess,
  findProcessAssignDTO
} from "@/api/modules/changeManagement";
import { getProcessImage, processDetail,getProcessInstance } from "@/api/modules/common";

import { useAllChangeOptions } from "@/stores/modules/change";
import { useUserStore } from "@/stores/modules/user";

const allChangeOptions = useAllChangeOptions();
const userStore = useUserStore();

//流程
const dialogName = ref("");
const outcomeName = ref("");
const processOutcome = (e: string) => {
  dialogName.value = "动作-" + e;
  outcomeName.value = e;
  let a = processHandleForm.groupNo;
  processHandleForm.groupNo = a;
  console.log(processHandleForm);
  showProcessHandleMask();
  return;
};

//流程重新开始
const reStart = () => {
  ElMessageBox.prompt("请输入备注", "重新开始", {
    confirmButtonText: "确认",
    cancelButtonText: "取消"
  })
    .then(({ value }) => {
      assignTechniciansLoading.value = true;
      changeAction({
        "changeDTO.currentUser": userStore.username,
        "historyRecordDto.operator": userStore.username,
        "changeDTO.changeAction": "reopen",
        "changeDTO.eno": details.value.eno,
        "changeDTO.pid": details.value.pid,
        "historyRecordDto.logTitle": "流程重新开始", // 技术员名称
        "historyRecordDto.logDetails": value
      })
        .then(() => {
          assignTechniciansLoading.value = false;
          assignTechniciansMask.value = false;
          ElMessage.success("提交成功");
          getData();
          emit("change");
        })
        .catch(err => {
          assignTechniciansLoading.value = false;
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Input canceled"
      });
    });
  console.log("restart");
};
//流程

// 定义 emit 事件
const emit = defineEmits<{
  // change: [];
  (e: "change"): void;
}>();

// 流程图
const flowChartMask = ref(false);
const flowChartUrl = ref(""); // 流程图
const flowImg = ref("");
const seeFlowChart = async() => {
  flowChartMask.value = true;
  if (!flowChartUrl.value) {
    getProcessImage(details.value.processKey).then((res: any) => {
      flowChartUrl.value = URL.createObjectURL(res);
    });
  }
  const data = await getProcessInstance(details.value.pid);
  let html = data.toString();
  let vHtml = html.replaceAll("jbpm!getProcessImage.action", "api/jbpm!getProcessImage.action");
  flowImg.value = vHtml;
};

// 指派组
// const groupList = computed(() => {
//   let list = JSON.parse(JSON.stringify(allChangeOptions.groupList));
//   list.forEach(item => {
//     item.label = item.orgName;
//     item.value = item.orgNo;
//     if (item.children) {
//       item.children.forEach(vo => {
//         vo.label = vo.orgName;
//         vo.value = vo.orgNo;
//         if (vo.children) {
//           vo.children.forEach(v => {
//             v.label = v.orgName;
//             v.value = v.orgNo;
//           });
//         }
//       });
//     }
//   });
//   return list;
// });

const dialogVisible = ref(false);
const details = ref<any>({});
const processDetailData = ref<any>({});
const loading = ref(false);
const tabName = ref("expandInfo");
const tabHistory = ref<string[]>([]); // tab切换历史

// 指派技术员
const assignTechniciansForm = reactive({
  orgNo: "",
  technicianNo: "",
  technicianName: "",
  remark: ""
});
const orgNo = ref("");
watch(
  () => orgNo.value,
  val => {
    if (val.length > 0) {
      assignTechniciansForm.orgNo = val[2];
    } else {
      assignTechniciansForm.orgNo = "";
    }
  }
);
// 详情
const getData = () => {
  changeInfo({
    eno: details.value.eno
  })
    .then((res: any) => {
      loading.value = false;
      details.value = {
        ...details.value,
        ...res
      };
      changePlanForm.effect = res.effect;
      changePlanForm.onLinePlan = res.onLinePlan;
      changePlanForm.returnPlan = res.returnPlan;
      changePlanForm.checklist = res.checklist;

      if (res.pid) {
        // 获取流程详情
        processDetail(res.pid).then((res: any) => {
          if (res.length > 0) {
            processDetailData.value = res[0].flowTaskDTO[0];
            console.log("processDetailData", processDetailData.value);
          } else {
            processDetailData.value = {};
          }
        });
      } else {
        processDetailData.value = {};
      }
    })
    .catch(() => {
      loading.value = false;
    });
};

// 显示指派技术员弹窗
const assignTechniciansMask = ref(false);
const showAssignTechniciansMask = () => {
  assignTechniciansMask.value = true;
};
// 选择技术员弹窗
const selectUserMask = ref();
const selectUserType = ref("");
const selectUserGroupNo = ref("");
const selectUser = type => {
  selectUserType.value = type;
  // 指派技术员
  if (type == "technicianNo") {
    if (!assignTechniciansForm.orgNo) {
      ElMessage.warning("请选择技术组");
      return false;
    }
    selectUserGroupNo.value = assignTechniciansForm.orgNo;
    selectUserMask.value?.open();
    return false;
  }
  // 开启流程
  if (type == "assigneeNo") {
    if (!openProcessForm.groupNo) {
      ElMessage.warning("请选择技术组");
      return false;
    }
    selectUserGroupNo.value = openProcessForm.groupNo;
    selectUserMask.value?.open();
    return false;
  }
  // 重新任务指派
  if (type == "taskReassignment") {
    // if (!openProcessForm.groupNo) {
    //   ElMessage.warning("请选择技术组");
    //   return false;
    // }
    selectUserGroupNo.value = details.value.orgNo;
    selectUserMask.value?.open();
    return false;
  }
  // 流程动作
  if (type == "processHandleFormTechnicianNo") {
    if (!processHandleForm.groupNo) {
      ElMessage.warning("请选择技术组");
      return false;
    }
    selectUserGroupNo.value = processHandleForm.groupNo;
    selectUserMask.value?.open();
    return false;
  }

  selectUserMask.value?.open();
};
// 选择技术员
const selectUserChange = e => {
  // 指派技术员
  if (selectUserType.value == "technicianNo") {
    assignTechniciansForm.technicianNo = e.userId;
    assignTechniciansForm.technicianName = e.fullName;
    return false;
  }
  // 开启流程
  if (selectUserType.value == "assigneeNo") {
    openProcessForm.assigneeNo = e.userId;
    openProcessForm.assigneeName = e.fullName;
    return false;
  }
  // 任务重新指派
  if (selectUserType.value == "taskReassignment") {
    taskReassignmentForm.assigneeNo = e.userId;
    taskReassignmentForm.assigneeName = e.fullName;
    return false;
  }
  // 流程动作
  if (selectUserType.value == "processHandleFormTechnicianNo") {
    processHandleForm.assigneeNo = e.userId;
    processHandleForm.assigneeName = e.fullName;
    return false;
  }
};

const assignTechniciansLoading = ref(false);
// 提交指派
const assignTechniciansSubmit = () => {
  if (!assignTechniciansForm.orgNo) {
    ElMessage.warning("请选择技术组");
    return false;
  }
  if (!assignTechniciansForm.technicianNo) {
    ElMessage.warning("请选择技术员");
    return false;
  }
  assignTechniciansLoading.value = true;
  
  changeAction({
    "changeDTO.currentUser": userStore.username,
    "historyRecordDto.operator": userStore.username,
    "changeDTO.changeAction": "assingeeTechnician",
    "changeDTO.eno": details.value.eno,
    "changeDTO.pid": details.value.pid,
    "changeDTO.orgNo": assignTechniciansForm.orgNo, // 指派技术组id
    "changeDTO.technicianNo": assignTechniciansForm.technicianNo, // 技术员id
    "historyRecordDto.logTitle": assignTechniciansForm.technicianName, // 技术员名称
    "historyRecordDto.logDetails":
      "指派组 : " + assigneeGroupName.value + "<br>指派到技术员 : " + assignTechniciansForm.technicianName + "<br>" + assignTechniciansForm.remark
  })
    .then(() => {
      assignTechniciansLoading.value = false;
      assignTechniciansMask.value = false;
      ElMessage.success("提交成功");
      getData();
      emit("change");
    })
    .catch(err => {
      assignTechniciansLoading.value = false;
    });
};

// 开启流程
const openProcessMask = ref(false);
const openProcessForm = reactive({
  remark: "", // 备注
  groupNo: "", // 技术组
  groupName: "",
  assigneeNo: "", // 技术员
  assigneeName: "",
  emailAddress: "" // 邮箱
});
const openProcessGroupName = ref("");
watch(
  () => openProcessGroupName.value,
  val => {
    if (val.length == 3) {
      openProcessForm.groupNo = val[2];
    } else {
      openProcessForm.groupNo = "";
    }
  }
);
// 选择部门
const selectDepartmentType = ref("");
const selectDepartmentTitle = ref("");
const selectDepartmentMask = ref();
const assigneeGroupName = ref("");
const selectDepartment = (type: string, title: string) => {
  selectDepartmentType.value = type;
  selectDepartmentTitle.value = title;
  selectDepartmentMask.value?.open();
};
const departmentChange = e => {
  switch (selectDepartmentType.value) {
    // case "filterForm.requestorOrgNo":
    //   requestorOrgName.value = e.orgName;
    //   filterForm.requestorOrgNo = e.orgNo;
    //   break;
    case "filterForm.assigneeGroupNo":
      assignTechniciansForm.orgNo = e.orgNo;
      assigneeGroupName.value = e.orgName;
      break;
    // case "conditionForm.propValue":
    //   conditionForm.propDisplayValue = e.orgName;
    //   conditionForm.propValue = e.orgNo;
    //   break;
    default:
      break;
  }
};
const showOpenProcessMask = () => {
  for (const key in openProcessForm) {
    openProcessForm[key] = "";
  }
  openProcessMask.value = true;
  // 开启流程默认组
  findProcessAssignDTO({
    "processHandleDTO.eno": details.value.eno,
    "processHandleDTO.isOpenProcess": true,
    "processHandleDTO.module": "change"
  }).then((res: any) => {
    openProcessForm.groupNo = res.groupId;
    openProcessForm.groupName = res.groupName;
  });
};
// 开启流程提交
const openProcessLoading = ref(false);
const openProcessSubmit = () => {
  if (!openProcessForm.groupNo) {
    ElMessage.warning("请选择技术组");
    return false;
  }
  if (!openProcessForm.assigneeNo) {
    ElMessage.warning("请选择技术员");
    return false;
  }
  openProcessLoading.value = true;
  openProcess({
    "processHandleDTO.operator": userStore.username,
    "processHandleDTO.pid": "",
    "processHandleDTO.taskId": "",
    "processHandleDTO.eno": details.value.eno,
    "processHandleDTO.assignType": "dynamicAssignee",
    "processHandleDTO.outcome": "",
    "processHandleDTO.nextActivityType": "task",
    "processHandleDTO.allowUseDynamicAssignee": false,
    "processHandleDTO.flowActivityId": "",
    "processHandleDTO.approverTask": false,
    "processHandleDTO.module": "change",
    "processHandleDTO.variablesAssigneeType": "",
    "processHandleDTO.leaderNum": 0,
    "processHandleDTO.allowUseVariablesAssignee": false,
    "processHandleDTO.variablesAssigneeGroupNo": 0,
    "processHandleDTO.variablesAssigneeGroupName": "",
    "processHandleDTO.mailHandlingProcess": false,
    "processHandleDTO.activityName": "",
    "processHandleDTO.remark": openProcessForm.remark,
    "processHandleDTO.groupNo": openProcessForm.groupNo, // 技术组
    "processHandleDTO.assigneeNo": openProcessForm.assigneeNo, // 技术员
    assigneeName: openProcessForm.assigneeName, // 技术员名称
    "processHandleDTO.approversMemberSet": "",
    "processHandleDTO.approverResult": true,
    "processHandleDTO.emailAddress": openProcessForm.emailAddress
  })
    .then(() => {
      openProcessLoading.value = false;
      ElMessage.success("操作成功");
      openProcessMask.value = false;
      getData();
    })
    .catch(() => {
      openProcessLoading.value = false;
    });
};

// 任务重新指派
const taskReassignmentMask = ref(false);
const showTaskReassignmentMask = () => {
  taskReassignmentMask.value = true;
};
const taskReassignmentLoading = ref(false);
const taskReassignmentForm = reactive({
  assigneeNo: "",
  assigneeName: "",
  remark: ""
});
const taskReassignmentSubmit = () => {
  taskReassignmentLoading.value = true;
  assignTask({
    "processHandleDTO.operator": userStore.username,
    "processHandleDTO.pid": details.value.pid,
    "processHandleDTO.taskId": processDetailData.value.taskId,
    "processHandleDTO.eno": details.value.eno,
    "processHandleDTO.module": "change",
    "processHandleDTO.handleType": "TaskReAssigne",
    "processHandleDTO.assignType": "dynamicAssignee",
    "processHandleDTO.allowUseDynamicAssignee": false,
    "processHandleDTO.allowUseVariablesAssignee": false,
    "processHandleDTO.assigneeNo": taskReassignmentForm.assigneeNo,
    "processHandleDTO.remark": taskReassignmentForm.remark
  })
    .then(() => {
      taskReassignmentLoading.value = false;
      ElMessage.success("提交成功");
      taskReassignmentMask.value = false;
      getData();
    })
    .catch(() => {
      taskReassignmentLoading.value = false;
    });
};

// 提交变更计划
const processHandleMask = ref(false);
const processHandleForm = reactive({
  remark: "",
  emailAddress: "",
  groupNo: "",
  assigneeNo: "",
  groupName: "",
  assigneeName: ""
});

const groupNo = ref("");
watch(
  () => groupNo.value,
  val => {
    if (val.length > 0) {
      processHandleForm.groupNo = val[2];
    } else {
      processHandleForm.groupNo = "";
    }
  }
);

const showProcessHandleMask = () => {
  processHandleForm.remark = "";
  processHandleForm.emailAddress = "";
  processHandleForm.groupNo = details.value.orgNo;
  processHandleForm.groupName = details.value.orgName;
  processHandleForm.assigneeName = details.value.technicianName;
  processHandleForm.assigneeNo = details.value.technicianNo;
  processHandleMask.value = true;
};
const processHandleLoading = ref(false);
const processHandleSubmit = () => {
  // if (!processHandleForm.logDetails) {
  //   ElMessage.warning("请输入备注");
  //   return false;
  // }
  processHandleLoading.value = true;
  processHandle({
    "processHandleDTO.operator": userStore.username,
    "processHandleDTO.pid": details.value.pid,
    "processHandleDTO.taskId": processDetailData.value.taskId,
    "processHandleDTO.eno": details.value.eno,
    "processHandleDTO.assignType": "",
    "processHandleDTO.outcome": outcomeName.value,
    "processHandleDTO.nextActivityType": "task",
    "processHandleDTO.allowUseDynamicAssignee": false,
    "processHandleDTO.flowActivityId": processDetailData.value.flowActivityDTO.id,
    "processHandleDTO.approverTask": false,
    "processHandleDTO.module": "change",
    "processHandleDTO.variablesAssigneeType": "",
    "processHandleDTO.leaderNum": 0,
    "processHandleDTO.allowUseVariablesAssignee": false,
    "processHandleDTO.variablesAssigneeGroupNo": 0,
    "processHandleDTO.variablesAssigneeGroupName": "",
    "processHandleDTO.mailHandlingProcess": false,
    "processHandleDTO.activityName": processDetailData.value.flowActivityDTO.activityName,
    "processHandleDTO.remark": processHandleForm.remark,
    "processHandleDTO.groupNo": processHandleForm.groupNo,
    "processHandleDTO.assigneeNo": processHandleForm.assigneeNo,
    "processHandleDTO.approversMemberSet": "",
    "processHandleDTO.approverResult": true,
    "processHandleDTO.emailAddress": processHandleForm.emailAddress // 邮箱
  })
    .then(() => {
      processHandleLoading.value = false;
      ElMessage.success("操作成功");
      processHandleMask.value = false;
      getData();
    })
    .catch(() => {
      processHandleLoading.value = false;
    });
};

// 变更计划
const changePlanType = ref("effect");
const changePlanForm = reactive({
  effect: "",
  onLinePlan: "",
  returnPlan: "",
  checklist: ""
});
// 保存变更计划
const submitChangePlan = () => {
  if (!changePlanForm[changePlanType.value]) {
    ElMessage.warning("请输入内容");
    return false;
  }
  loading.value = true;
  editChangeBaseInfo({
    "changeDTO.pid:historyRecordDto.operator": userStore.username,
    "changeDTO.eno": details.value.eno,
    "changeDTO.effect": changePlanForm.effect,
    "changeDTO.onLinePlan": changePlanForm.onLinePlan,
    "changeDTO.returnPlan": changePlanForm.returnPlan,
    "changeDTO.checklist": changePlanForm.checklist
  })
    .then(() => {
      loading.value = false;
      ElMessage.success("提交成功");
    })
    .catch(() => {
      loading.value = false;
    });
};

const open = (item: any) => {
  details.value = item;
  tabName.value = "expandInfo";
  tabHistory.value = [];
  dialogVisible.value = true;
  loading.value = true;
  getData();
};

watch(tabName, val => {
  tabHistory.value.push(val);
});

defineExpose({
  open
});
</script>

<style lang="scss" scoped>
:deep(.el-drawer__body) {
  padding-top: 10px;
}
.btns {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .el-button {
    margin: 4px 8px 4px 0;
  }
}
.flex-1 {
  flex: 1;
  overflow: hidden;
}
.title {
  margin-bottom: 10px;
  font-weight: bold;
}
.liu-cheng-img {
  display: block;
  width: 100%;
  min-height: 300px;
}
</style>
